<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>    
    <head>        
        <title>Share Listing</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content="Edit Listing" />

        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>        
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>

        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>

        <%@ include file="include/listingedit_mobile_incl.jsp" %> 

        <link rel="stylesheet" href="css/bootstrap/prettify.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap/index.css" rel="stylesheet">

        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/bootstrap/bootstrap-wysiwyg.js"></script>
        <script src="js/bootstrap/jquery.hotkeys.js"></script>

        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {
                    $("#menu").hide();
                }
                else {
                    $("#menu").show();
                }
            }
        </script>

        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>

    </head>

    <body>
        <div data-role="page" data-theme="d">

            <%@include file="header_mobile.jsp" %>

            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Share This</p>   
            </div>

            <div data-role="content" style="background-color: #ffffff">

                <br>
                <span style="color: gray; font-style: italic; font-size:12px;">Share your rental property with your Facebook groups and Twitter followers to gain more viewership.</span>
                
                <br>
                <br>
                
                <table style="width:100%" cellpadding="5" cellspacing="5">
                    <tr>
                        <td align="center" style="width:45%">
                            <a href="#" 
                               onclick="
                window.open(
                        'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('${model.props.appPath}/long-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}'),
                        'facebook-share-dialog',
                        'width=626,height=436');
                return false;">
                                <img src="${model.props.appPath}/img/btn-facebook-share.jpg" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <a href="#" 
                               onclick="
                window.open(
                        'http://twitter.com/intent/tweet?text=${model.listing.title}&url=${model.props.appPath}/long-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}',
                        'twitter-share-dialog',
                        'width=626,height=436');
                return false;">
                                <img src="${model.props.appPath}/img/btn-twitter-share.jpg" />
                            </a>
                        </td>
                    </tr>
                </table>  
                             
            </div>

                <br>            
                          
                <a href="#" data-role="button" data-theme="a" onclick="window.location='${model.props.appPath}/listing.htm?a=2&id=${model.listing.id}'" style="width: 95%; margin-left: 2%;">Post another property</a>  
                
                <a href="#" data-role="button" data-theme="b" onclick="window.location='${model.props.appPath}/listing.htm?a=2&id=${model.listing.id}'" style="width: 95%; margin-left: 2%;">Done. Take me to my property</a>  
                 
                <br>
                      
            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

        </div>
    </body>
</html>
